<template>
	<div>
		<el-table :data="userlist" border>
			<el-table-column label="ID" prop="id"></el-table-column>
			<el-table-column label="姓名" prop="name"></el-table-column>
			<el-table-column label="密码" prop="password"></el-table-column>
			<el-table-column label="操作">
				<!-- 功能按钮 -->
				<template v-slot="scope">
					<el-button type="primary" icon="el-icon-edit" @click="editDialog(scope.row.id)">改</el-button>
					<el-button type="danger" icon="el-icon-delete" @click="deleteDialog(scope.row.id)">删</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页 -->
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page" :page-sizes="[1, 10, 50, 100]"
		 :page-size="page_size" layout="total, sizes, prev, pager, next, jumper" :total="total">
		</el-pagination>
		
		<el-dialog title="改" :visible.sync="editDialogVisible" width="30%">
			<span>
				<el-form label-width="80px" :model="edit">
					<el-form-item label="用户:">
						<el-input v-model="edit.name"></el-input>
					</el-form-item>
					<br />
					<el-form-item label="密码:">
						<el-input v-model="edit.password"></el-input>
					</el-form-item>
				</el-form>
			</span>
		
			<span slot="footer" class="dialog-footer">
				<el-button @click="editDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="editDialogVisible = false;edituser()">确 定</el-button>
			</span>
		</el-dialog>
		
		<el-dialog title="删" :visible.sync="deleteDialogVisible" width="30%">
			<span>确定删除用户吗？</span>
			<span slot="footer" class="dialog-footer">
				<el-button @click="deleteDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="deleteDialogVisible = false;deleteuser()">确 定</el-button>
			</span>
		</el-dialog>
		

	</div>
</template>

<script>
	export default {
		data() {
			return {
				userlist: [],
				page_size: 10,
				page: 1,
				token: window.sessionStorage.getItem("token"),
				total: 0,
				addDialogVisible: false,
				editDialogVisible: false,
				deleteDialogVisible: false,
				u_id: "",
				edit: {
					"u_id": "",
					"name": "",
					"password":"",
				},
				deleteId: "",
				
			}
		},
		created() {
			this.getuser();
		},
		methods: {
			getuser() {
				let url = 'userlist/' + this.token + '/' + this.page + '/' + this.page_size;
				// console.log(url);
				this.$http.get(url).then(res => {
					this.userlist = res.data.data;
					this.total = res.data.total;
				})
			},
			handleCurrentChange(current) {
				this.page = current;
				this.getuser();
			},
			handleSizeChange(size) {
				this.page_size = size;
				this.getuser();
			},
			addDialog(id) {
				this.addDialogVisible = true;
			},
			editDialog(id) {
				this.editDialogVisible = true;
				this.edit.u_id = id;
			},
			edituser() {
				let url = 'update/' + this.token;
				console.log(url);
				this.$http.post(url, this.edit).then(res => {
					// console.log(res.data);
					if(res.data.status == 2000){
						this.$message.success("修改成功");
						this.getuser();
					}
					else {
						this.$message.error("修改失败");
					}
				})
			},
			deleteDialog(id) {
				this.deleteDialogVisible = true;
				this.deleteId = id;
			},
			deleteuser() {
				let url = 'delete/'+this.token+"?u_id="+this.deleteId;
				this.$http.get(url).then(res => {
					// console.log(res.data);
					if(res.data.status == 2000){
						this.$message.success("删除成功");
						this.getuser();
					}
					else {
						this.$message.error("删除失败");
					}
				})
			}
		}
	}
</script>

<style>
</style>
